<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
	String path = request.getContextPath();
	request.setAttribute("path", request.getContextPath());
	request.setAttribute("jsPath", path+"/js");
	request.setAttribute("cssPath", path+"/css");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>权限管理</title>
	

  <!-- 页面js调用部分 -->
<!-- Mainly scripts -->
<!-- <script src="/js/jquery-2.1.1.min.js"></script> -->
<script src="/js/bootstrap.min.js?v=3.4.0"></script>
<script src="/js/jquery.metisMenu.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
<script src="/js/hplus.js?v=2.2.0"></script>
<script src="/js/pace.min.js"></script>


<!-- 树形文件 css&js -->
   <!--  <script type="text/javascript" src=" /js/jquery-1.7.2.js"></script> -->
    
	<link rel="stylesheet" type="text/css" href="/css/zTreeStyle/zTreeStyle.css"/>
    <link rel="stulesheet" type="text/css" href="/css/awesomeStyle/awesome.css"/>
    <link rel="stulesheet" type="text/css" href="/css/awesomeStyle/awesome.less"/>
    <link rel="stulesheet" type="text/css" href="/css/awesomeStyle/fa.less"/>
    <link rel="stylesheet" type="text/css" href="/css/metroStyle/metroStyle.css"/>
   
    <link rel="stylesheet" href="/css/demo.css" type="text/css">
	<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="/js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript" src="/js/jquery.ztree.exedit.js"></script> 
	<!-- 树形文件 -->
	
	<!-- zyTable --> 
	<link rel="stylesheet" type="text/css" href="/plugs/bootstrap-ui/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="/plugs/button/css/component.css">
	<link rel="stylesheet" type="text/css" href="/plugs/checkbox/style.css">
	
			
	<!-- 加载zyPopup弹出层的样式 -->
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/plug/DialogEffects/css/demo.css"/>
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/plug/DialogEffects/css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/plug/DialogEffects/css/dialog.css" />
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/plug/DialogEffects/css/dialog-sandra.css" />
	<link rel="stylesheet" type="text/css" href="/plugs/zyPopup/css/zyPopup.css" />		
	<link rel="stylesheet" type="text/css" href="/css/table.css">
	<!-- 引用公共JS -->
		
	<script type="text/javascript" src="/plugs/paging/js/jquery.pagination.js"></script>
			
	<!-- 加载zyPopup弹出层的脚本 -->
	<script type="text/javascript" src="/plugs/zyPopup/plug/DialogEffects/js/modernizr.custom.js"></script>
	<script type="text/javascript" src="/plugs/zyPopup/plug/DialogEffects/js/classie.js"></script>
	<script type="text/javascript" src="/plugs/zyPopup/plug/DialogEffects/js/dialogFx.js"></script>
	<script type="text/javascript" src="/plugs/zyPopup/js/zyPopup.js"></script>
		
	<script type="text/javascript" src="/js/table.js"></script> 
	<!-- zyTable --> 
	
	<!-- css调用 -->
<link href="/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
<link href="/css/font-awesome.css?v=4.3.0" rel="stylesheet">
<link href="/css/morris-0.4.3.min.css" rel="stylesheet">
<!-- Gritter -->
<link href="/css/jquery.gritter.css" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link href="/css/style.css?v=2.2.0" rel="stylesheet">
	<script type="text/javascript">
		var setting = {
			view: {  
		        addHoverDom: addHoverDom,// 用于当鼠标移动到节点上时，显示用户自定义控件。务必与 setting.view.removeHoverDom 同时使用  
		                 // 用于当鼠标移动到节点上时，显示用户自定义控件。务必与 setting.view.removeHoverDom 同时使用  
		        removeHoverDom: removeHoverDom // 用于当鼠标移出节点时，隐藏用户自定义控件。务必与 addHoverDom 同时使用  
			}, 
			edit: {
				enable: true,
				showRemoveBtn: true,
				showRenameBtn: true
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeDrag: beforeDrag,
				beforeEditName: beforeEditName,
				beforeRemove: beforeRemove,
				beforeRename: beforeRename,
				onRemove: onRemove,
				onRename: onRename,
				onClick: onClick
			}
		};

		var zNodes =[
			<c:forEach var="s" items="${functions}">
				{ id:${s.functionauthorityId}, pId:${s.parentId}, name:"${s.name}",
					isParent:"${s.isgroup}", t:"${s.isgroup}",open:true},
			</c:forEach>
		];

		function onClick(event, treeId, treeNode, clickFlag) {
			//alert(treeNode.name+"  "+treeNode.pId+"  "+treeNode.isParent+" "+treeNode.id);
			
			window.location.href="/functionauthority/find?functionauthorityId="+treeNode.id+"&name="+treeNode.name+"&isParent="+treeNode.isParent;
		}
		
		var log, className = "dark";
		function beforeDrag(treeId, treeNodes) {
			return false;
		}
		
		function beforeDrop(treeId, treeNodes, targetNode, moveType) {
			return targetNode ? targetNode.drop !== false : true;
		}
		
		function beforeEditName(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			setTimeout(function() {
				if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？")) {
					setTimeout(function() {
						zTree.editName(treeNode);
					}, 0);
				}
			}, 0);
			return false;
		}
		
	    function beforeRemove(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);  
			return confirm("确认删除 节点 -- " + treeNode.name + " 吗？"); 
		} 
		
		 function onRemove(e, treeId, treeNode) { 
				window.location.href="/functionauthority/delete?id="+treeNode.id;
				$(".tips").text("提示:删除成功！");
			showLog("[ "+getTime()+" onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name); 
		}
		function beforeRename(treeId, treeNode, newName, isCancel) {
			className = (className === "dark" ? "":"dark");
			showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
			if (newName.length == 0) {
				setTimeout(function() {
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					zTree.cancelEditName();
					alert("节点名称不能为空.");
				}, 0);
				return false;
			}
			return true;
		}
		function onRename(e, treeId, treeNode, isCancel) {
			window.location.href="/functionauthority/edit?name="+treeNode.name+"&parentId="+treeNode.pId+"&functionauthorityId="+treeNode.id;
			showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
		}
		function showRemoveBtn(treeId, treeNode) {
			return !treeNode.isFirstNode;
		}
		function showRenameBtn(treeId, treeNode) {
			return !treeNode.isLastNode;
		}
		function showLog(str) {
			if (!log) log = $("#log");
			log.append("<li class='"+className+"'>"+str+"</li>");
			if(log.children("li").length > 8) {
				log.get(0).removeChild(log.children("li")[0]);
			}
		}
		
		function setCheck() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			isCopy = true,
			isMove = true,
			prev =true,
			inner = true,
			next =true;
			zTree.setting.edit.drag.isCopy = isCopy;
			zTree.setting.edit.drag.isMove = isMove;
			showCode(1, ['setting.edit.drag.isCopy = ' + isCopy, 'setting.edit.drag.isMove = ' + isMove]);

			zTree.setting.edit.drag.prev = prev;
			zTree.setting.edit.drag.inner = inner;
			zTree.setting.edit.drag.next = next;
			showCode(2, ['setting.edit.drag.prev = ' + prev, 'setting.edit.drag.inner = ' + inner, 'setting.edit.drag.next = ' + next]);
		}
		
		function showCode(id, str) {
			var code = $("#code" + id);
			code.empty();
			for (var i=0, l=str.length; i<l; i++) {
				code.append("<li>"+str[i]+"</li>");
			}
		}
		
		var newCount = 1;
		var Rand = Math.round(Math.random()*10000);
		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='add node' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_"+treeNode.tId);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				var value="newNode"+Rand;
				/* 添加权限输入框 */
				$("body").prepend("<div class='blackLayer' style='background-color: black;height: 795px;width: 1130px;z-index:5;margin-left: 220px;opacity: 0.3;position:absolute;'></div>"); 
				$("#addAuthity").show();
				$("#addForm input[name=parentId]").attr("value",treeNode.id);
				$("#addForm input[name=isParent]").attr("value",treeNode.isParent);
				/* 原本用于添加权限信息的代码 */
				 /*  $.ajax({  
			            type : "get",    
			            url : "/functionauthority/add",    
			            data :    
			            {    
			            	name:value,
			            	keyValue:value,
			            	parentId:treeNode.id,
			            	isParent:treeNode.isParent 
			            },  
			            success:function(result){  
			           
							return false;
			            }  
			        });    */
			    /* window.location.href="/functionauthority/add?name="+value+"&keyValue="+value+"&parentId="+treeNode.id+"&isParent="+treeNode.isParent; */
				/* zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"newNode" + (newCount++)}); */
				return false;
			});
		}; 
		
		/* // 添加子部门操作  
		 var newCount = 0;  
		function addHoverDom(treeId, treeNode) {  
		    var sObj = $("#" + treeNode.tId + "_span");  
		    if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;  
		    var addStr = "<span class='button add' id='addBtn_" + treeNode.tId  
		        + "' title='添加' onfocus='this.blur();'></span>";  
		    sObj.after(addStr);  
		    var btn = $("#addBtn_"+treeNode.tId);  
		    var isAdded=false;  
		    if (btn) btn.bind("click", function(){  
		        newCount++;  
		        $.ajax({  
		            type : "POST",    
		            async : false,    
		            url : "department!addDepNote.action",    
		            data :    
		            {    
		                departName : "新部门" + newCount,  
		                parentId:treeNode.id  
		            },  
		            success:function(result){  
		                if(""!=result ){  
		                    var zTree = $.fn.zTree.getZTreeObj("departtree");  
		                    zTree.addNodes(treeNode, {id:result, parentId:treeNode.id, departName:"新部门" + (newCount)});  
		                    return false;  
		                }else{  
		                    alert("无法添加新部门，请联系管理员！");  
		                }  
		            }  
		        });   
		        return false;             
		    });  
		};    */
		
		 function getTime() {
			var now= new Date(),
			h=now.getHours(),
			m=now.getMinutes(),
			s=now.getSeconds(),
			ms=now.getMilliseconds();
			return (h+":"+m+":"+s+ " " +ms);
		}
	
		
		// 用于当鼠标移出节点时，隐藏用户自定义控件  
		function removeHoverDom(treeId, treeNode) {  
		    $("#addBtn_"+treeNode.tId).unbind().remove();  
		};  
		
		$(function() {
			// 初始化插件
			$(".table").table({
				"width"      : 500,
				"height"     : 250,
				"field"      : [{"id":"ID", "name":"FunctionId", "width":80},{"id":"NAME", "name":"名字", "width":170},{"id":"KeyValue", "name":"KeyValue", "width":150},{"id":"CreateTime","name":"创建时间","width":150}],
				//"adaptive"   : true, // 数据源字段自适应宽度方式
				"adaptive"   : false, // 数据源字段自适应宽度方式
				"pattern"    : false, // 模式   true:字段方式获取数据   false:普通添加方式获取数据
				"example"    : true,  // 实例   当前创建的是否是model中的实例
				"check"      : true,  // 全选
				"number"     : true,  // 序号
				"edit"       : true,  // 编辑
				"del"        : true,  // 删除
				"allDel"     : true,  // 全部删除
				"filter"     : true,  // 过滤
				"paging"     : false,  // 分页条
				"zebra"      : true,  // 斑马线
				"dataTotal"  : 30,     // 数据总个数
				"rowsPerPage": 20,     // 一页多少行数据
				"pagingComplete": function(nNowPage){  // 翻页的回调方法
	
					console.info("用户定义翻页回调:");
					console.info(nNowPage);
					// 翻页添加数据
					var data = [];
					<c:forEach var="s" items="${infos}">
						data.push({"ID":"${s.functionauthorityId}","NAME":"${s.name}","KeyValue":"${s.keyValue}","CreateTime":"${s.createTime}"});
					</c:forEach>
					
					/* for(var i=nNowPage*10+1; i<=nNowPage*10+10; i++){
						if(i!=nNowPage*10+10){
							
						}else{
							data.push({"ID":"000"+i,"NAME":"张三"+i+"号","AGE":(20+i)+"岁"});
						}
					} */
					$(".table").table("addData", data);
				},
				"delComplete": function(aRowId){  // 删除数据的回调方法
					if(aRowId.length>1){
						var ids=JSON.stringify(aRowId)
						window.location.href="/functionauthority/delete?ids="+ids;
						$(".tips").text("提示:删除成功！");
					}else{
						var id=aRowId[0].ID;
						window.location.href="/functionauthority/delete?id="+id;
						$(".tips").text("提示:删除成功！");
					}
					console.info("用户定义删除回调:");
					console.info(aRowId);
				},
				"editComplete": function(afterData,beforeData){  //编辑数据的回调方法
					
					console.info("用户定义编辑回调:");
					console.info(afterData);
					console.info(beforeData);
				}
			});

			// 初始化添加数据
			var data = [];
			<c:forEach var="s" items="${infos}">
				data.push({"ID":"${s.functionauthorityId}","NAME":"${s.name}","KeyValue":"${s.keyValue}","CreateTime":"${s.createTime}"});
			</c:forEach>
			/* for(var i=1; i<=10; i++){
				if(i!=10){
					data.push({"ID":"000"+i,"NAME":"张三"+i+"号","AGE":(20+i)+"岁"});
				}else{
					data.push({"ID":"000"+i,"NAME":"张三"+i+"号","AGE":(20+i)+"岁"});
				}
			} */
			$(".table").table("addData", data);
			
			$.fn.zTree.init($(".rightInfo .content_wrap .zTreeDemoBackground #treeDemo"), setting, zNodes);
			/* $("#selectAll").bind("click", selectAll);  */
			$(".button").hover(function(){
				$(this).css("cursor","Pointer");
			});
			
			$(".dialog__content .dialog-content div[id*=editPopup_CreateTime]").find("input[type=text]").attr("readonly","readonly");
			$(".dialog__content .dialog-content div[id*=editPopup_ID]").find("input[type=text]").attr("readonly","readonly"); 		
			/* 添加权限输入框 */
			$("#addAuthity").hide();	
			$("#addAuthity .buttonBox #cancel").click(function(){
				$(this).parents("#addAuthity").hide();
			});
			$("#confirm").click(function(){
				var param = "<div class='tips' style='color:red;margin-left:173px;text-align:left;position:absolute;'>name不能为空</div>";
				if($("#addForm input[name=name]").val()==""){
					$(".tips").remove();
					$("#addForm input[name=name]").after(param);
					return;
				}
				if($("input[name=keyValue]").val()==""){
					$(".tips").remove();
					$("input[name=keyValue]").after(param);
					return;
				}
				$("#addForm").submit();
			});
			$("#cancel").click(function(){
				$(".blackLayer").hide();
			});
			$("#confirm").mouseover(function(){
				$(this).css("cursor","pointer");
			});
			$("#cancel").mouseover(function(){
				$(this).css("cursor","pointer");
			});
		});
	</script>

	
<style type="text/css">
		#addAuthity{
			width:561px;
			height:340px; 
			z-index:7;
			position:fixed;
			margin: 87px 159px;
			background-color:white;
		}
		
		#addAuthity .title{
			border-bottom: 1px solid #E8E8E8;
			line-height: 35px;
			padding-left: 10px;
		}
		
		#addAuthity .content{
			margin-bottom:95px;
		}
		
		#addAuthity .content label{
			display: inline-block;
			width:80px;
			text-align:right;
			margin-left:-30px;
			margin-top:30px;
		}
		
		#addAuthity .content input{
			margin-left:10px;
			width:250px;
			height:35px;
			border:1px solid #DFDFDF;
		}
		
		#addAuthity .content form{
			margin-top:36px;
		}
		
		#addAuthity .buttonBox{
	    	height:59px;
			background-color:#F5F5F5;
		}
		
		#addAuthity .buttonBox div{
			width:75px;
			height:37px;
			text-align:center;
			padding-top:10px;
			float:right;
			margin-right:10px;
			margin-top:8px;
		}
		
		#addAuthity .buttonBox #confirm{
			background-color:#4D90FE;
			color:white;
		}
		
		#addAuthity .buttonBox #cancel{
			background-color:#E5E5E5;
		}
</style>
</head>
<body>
	<div id="wrapper">
		
		<!-- 左边导航 -->
		<%@ include file="../share/leftMenu.jsp" %>
				
		<div id="page-wrapper" class="gray-bg dashbard-1">
		<!-- 头部 -->
		<%@ include file="../share/head.jsp" %>
		
		<!-- 弹出框时背景色变黑 -->
		<!-- 添加权限的输入框 -->
		<div id="addAuthity">
			<p class="title">编辑</p>
			<div class="content">
				<form id="addForm" name="addAuth" action="/functionauthority/add">
					<label>NAME</label><input name="name" type="text"><br>
					<label>KeyValue</label><input name="keyValue" type="text">
					<input name="parentId" type="hidden" value="">
					<input name="isParent" type="hidden" value="">
				</form>
			</div>
			<div class="buttonBox">
				<div id="cancel">取消</div>
				<div id="confirm">确定</div>
			</div>
		</div>

      <!--------------------------
        | 请将正文内部分写在这里 |
        -------------------------->
	 <article>
	       <div class="staffInfo">
	           <div style="width:700px;height:400px;position: absolute;margin-left:32%;margin-top:10px;">
					<div class="table"></div>
				</div>
	        	<div class="rightInfo">
	        	<div class="content_wrap">
					<div class="zTreeDemoBackground left">
						<ul id="treeDemo" class="ztree"></ul>
					</div>		
				</div>
				<div class="tips">
				<c:if test="${not empty message}">
					${message}
				</c:if>
				</div>
		        </div>
	           <!--  <img src="/img/jiantouleft.png"> -->
	      		</div>
	    </article>
	<!-- 正文结束 -->
	</div>
	</div>

</body>
</html>